import React from 'react'
import type { StatisticProps } from 'antd'
import { Col, Row, Statistic } from 'antd'
import CountUp from 'react-countup'
import styles from './index.module.scss'
const formatter: StatisticProps['formatter'] = value => (
  <CountUp end={value as number} separator="," />
)

const StatisticNumber: React.FC = () => {
  return (
    <div className={styles.StatisticNumberContainer}>
      <Row gutter={16}>
        <Col span={12}>
          <Statistic title="Active Users" value={112893} formatter={formatter} />
        </Col>
        <Col span={12}>
          <Statistic
            title="Account Balance (CNY)"
            value={112893}
            precision={2}
            formatter={formatter}
          />
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Statistic title="Active Users" value={112893} formatter={formatter} />
        </Col>
        <Col span={12}>
          <Statistic
            title="Account Balance (CNY)"
            value={112893}
            precision={2}
            formatter={formatter}
          />
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Statistic title="Active Users" value={112893} formatter={formatter} />
        </Col>
        <Col span={12}>
          <Statistic
            title="Account Balance (CNY)"
            value={112893}
            precision={2}
            formatter={formatter}
          />
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Statistic title="Active Users" value={112893} formatter={formatter} />
        </Col>
        <Col span={12}>
          <Statistic
            title="Account Balance (CNY)"
            value={112893}
            precision={2}
            formatter={formatter}
          />
        </Col>
      </Row>
    </div>
  )
}
export default StatisticNumber
